<template>
	<view class="content">
		<view class="save-top-blcok">
			<image src="../../static/common/save-money-title.png" class="save-title"></image>
			<!-- <view class="save-title">一年帮助十万人省下一个亿</view> -->
			<navigator url="../search/search" hover-class="none">
				<view class="save-search">
					<image src="../../static/common/search.png" class="save-search-icon"></image>
					<view class="save-search-input">请输入关键词/宝贝标题</view>
				</view>
			</navigator>
			
			<view class="save-tags">
				<view class="tag-item" v-if="searchKeyList.length>0"
				v-for="(item,index) in searchKeyList" :key="index"
				@tap="saveKey(item.key)"
				>{{item.key}}</view>
			</view>
		</view>
		<view class="save-tabBar">
			<view class="tabar-zhibo" :class="{'tabar-selected':isZhibo}" @tap="changeTabar">直播室</view>
			<view class="tabar-jiaocheng" :class="{'tabar-selected':isJiaocheng}" @tap="changeTabar">省钱教程</view>
		</view>
		<!-- 直播室 -->
		<scroll-view class="zhibo-block" v-if="isZhibo" scroll-y="true" >
			<!-- <view class="box"> -->
				<view class="zhibo-tag" v-if="yongjinDetail.length>0"
				v-for="(item,index) in yongjinDetail" :key="index"
				>
					<image class="tag-user" :src="item.headimg == ''? '../../static/common/save-money-user.png' : getImgURL(item.headimg)"></image>
					<view class="tag-text">
						<text class="text-name">{{item.nickName}}</text>得了
						<text class="text-coin">{{item.amount}}</text>鼓励金
					</view>
				</view>
				<view v-else style="font-size: 13px;">暂无数据...</view>
			<!-- </view> -->
			
		</scroll-view>
		<!-- 教程 -->
		<view class="jiaocheng-block" v-if="isJiaocheng">
			<view class="jisocheng-intrduce">
				<view class="intrduce-title"><image src="../../static/common/jiaocheng-title.png" class="jiaocheng-title"></image></view>
				<view class="intrduce-text">
					<view class="intrduce-text-detail">1.在手机淘宝APP内复制要购买的商品标题</view>
					<view class="intrduce-text-detail">2.在熊猫优选搜索商品并购买</view>
					<view class="intrduce-text-detail">3.确认收货后领取鼓励金</view>
				</view>
			</view>
			<view class="jiaocheng-step">
				<image src="../../static/common/step1.jpg" class="step1"></image>
				<image src="../../static/common/step2.jpg" class="step2"></image>
				<image src="../../static/common/step3.jpg" class="step3"></image>
				<image src="../../static/common/step4.jpg" class="step4"></image>
				<image src="../../static/common/step5.jpg" class="step5"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isZhibo:true,//直播
				isJiaocheng:false,//教程
				tabarIndex:1,
				yongjinDetail:"",//佣金动态
				apptoken:"",
				searchKeyList:[],//搜索关键词
				pageIndex:1, //当前页数
			}
		},
		onLoad() {
			this.apptoken = uni.getStorageSync("apptoken");
			// if(uni.getStorageSync('apptoken')){
			// 	this.getUserInfo();
			// }
			this.getyongjinDetail();//获取佣金动态
			this.getSearchKyeList();//获取搜索关键词
		},
		methods:{
			//搜索关键词
			getSearchKyeList(){
				const self = this;
				uni.request({
					url:this.$API.URL + this.$API.getKeywords,
					data:{pageIndex:this.pageIndex},
					success(res) {
						console.log(res)
						self.searchKeyList = res.data.data;
						self.pageIndex ++; 
					}
				})
			},
			//根据关键词搜索
			saveKey(key){
				const _this = this;
				uni.hideKeyboard()
				 uni.setStorage({
				     key: 'search_key',
				     data: key,
				     success: function () {
				         _this.$CommonJS.navigateTo('../search/searchDetail');
				     }
				 });
			},
			getImgURL(url){
				if(url.indexOf('http')==-1){
					return this.$CommonJS.baseurl + url;
				}else{
					return url;
				}
			},
			getyongjinDetail(){
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.yongjinDetail,
					// data:{apptoken:this.apptoken},
					success(res) {
							console.log(res);
							if(res.data.success){
								_this.yongjinDetail = res.data.data;
							}else{
								uni.showToast({
									title:res.data.msg,
									icon:"none"
								})
							}
					}
				})
			},
			//切换tabar
			changeTabar(){
				if(this.tabarIndex == 1){
					this.isZhibo = true;
					this.isJiaocheng = false;
					this.tabarIndex = 2;
				}else{
					this.isZhibo = false;
					this.isJiaocheng = true;
					this.tabarIndex = 1;
				}
					
			}
		}
	}
</script>

<style scoped>
	@import url("saveMoney.css");
</style>
